import {useState} from "react";



/*

   所有 hook 函数，不管是自定义还是 react 自带的 hook 函数，只能在组件或者自定义hook函数顶级（不在函数中的代码块里）中使用
   自定义hook 函数

   抽取可复用的变量和回调函数
   返回 被使用的变量和回调函数
   使用时在 组件中顶级解构赋值获取变量和回调函数

 */
function useToggle(){
    let [show, setShow] = useState(true);
    let toggle = () => setShow(!show);

    return {show, toggle}
}

function App() {
    let {show, toggle} = useToggle();
    return (
        <div>
            {show && <div>hhh</div>}
            <button onClick={toggle}>toggle</button>
        </div>
    )
}


export default App;